<template>
	<view class="content">
		<u-navbar fixed safeAreaInsetTop placeholder bgColor="#E60012">
			<view class="custom-nav" slot="left">野人体育</view>
		</u-navbar>
		<view class="menu-wrap">
			<view class="swiper-wrap" v-if="bannerList.length">
				<u-swiper
					:list="bannerList"
					keyName="img"
					height="286rpx"
					circular
					indicator
					indicatorActiveColor="#E60012"
					@click="bannerClick($event, 'bannerList')"
				></u-swiper>
			</view>
			<view class="menus">
				<u-grid :border="false" col="4">
					<u-grid-item
						v-for="(item, baseListIndex) in menuList"
						:key="baseListIndex"
						@click="menuClick(item)"
					>
						<image :src="item.icon" class="menu-icon" mode="aspectFit"></image>
						<text class="grid-text">{{ item.title }}</text>
					</u-grid-item>
				</u-grid>
			</view>
		</view>

		<view class="main">
			<u-cell-group :border="false">
				<u-cell
					value="查看更多"
					arrow-direction="right"
					title="热门赛事"
					align="center"
					:border="false"
					rightIconStyle="color: #4d4d4d;margin:0 10rpx 0 0;font-size:26rpx;"
					titleStyle="margin-left:20rpx;"
					isLink
					linkType="switchTab"
					url="/pages/saishi/index"
					:clickable="false"
				>
				</u-cell>
			</u-cell-group>
			<view class="good-wrap">
				<u-grid :border="false" col="2">
					<u-grid-item
						v-for="(item, baseListIndex) in serverList"
						:key="baseListIndex"
						@click="onSeverDetail(item)"
						:name="item.id"
						bgColor="#fff"
					>
						<image :src="item.img" class="good-img" mode="aspectFill"></image>
						<u-icon
							name="clock"
							color="#999"
							size="14"
							:label="item.start"
							labelSize="26rpx"
							labelColor="#999"
						></u-icon>
						<text class="good-txt">{{ item.name }}</text>
					</u-grid-item>
				</u-grid>
			</view>
			<template v-if="newsList.length">
				<u-cell-group :border="false">
					<u-cell
						value="查看更多"
						arrow-direction="right"
						isLink
						linkType="navigateTo"
						url="/pages/news/index"
						:clickable="false"
						title="活动新闻"
						align="center"
						:border="false"
						rightIconStyle="color: #4d4d4d;margin:0 10rpx 0 0;font-size:26rpx;"
						titleStyle="margin-left:20rpx;"
					>
					</u-cell>
				</u-cell-group>
				<view class="good-wrap news-wrap">
					<view
						class="news"
						v-for="(item, index) in newsList"
						:key="item.id"
						@click="bannerClick(index, 'newsList')"
					>
						<image :src="item.img" class="news-img" mode="aspectFill"></image>
						<view class="news-right">
							<u--text
								:text="item.title"
								bold
								size="32rpx"
								lines="2"
								margin="6rpx 0 20rpx"
							></u--text>
							<u-icon
								name="clock"
								color="#999"
								size="14"
								:label="item.time"
								labelSize="26rpx"
								labelColor="#999"
							></u-icon>
						</view>
					</view>
					<u-loadmore :status="status" line marginTop="18" />
				</view>
			</template>
		</view>

		<u-popup
			:show="show"
			mode="center"
			:round="10"
			bgColor="transparent"
			:closeOnClickOverlay="false"
		>
			<view class="pop-main">
				<u--image
					:src="dialogArr[0].img"
					width="640rpx"
					height="800rpx"
					radius="10"
					mode="aspectFill"
					@click="bannerClick(0, 'dialogArr')"
				></u--image>
				<view class="pop-close" @click="show = false">
					<u-icon name="close" color="#fff" size="28rpx"></u-icon>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
const app = getApp()
import { formatDate } from '@/utils/util.js'
import { serveConfig } from '@/js/config/index.js'
export default {
	data() {
		return {
			imgUrl: app.globalData.ossUrl,
			bannerList: [],
			menuList: [
				{ icon: '/static/saishi_bm.png', title: '赛事报名' },
				{ icon: '/static/saishi_zs.png', title: '参赛助手' },
				{ icon: '/static/saishi_news.png', title: '赛事新闻' },
				{ icon: '/static/saishi_cj.png', title: '成绩查询' }
			],
			newsList: [],
			serverList: [],
			page: 1,
			status: 'loadmore',
			show: false,
			dialogArr: ''
		}
	},
	onLoad() {
		uni.showLoading({ title: '数据加载中' })
		this.getBannerAd()
		this.getBanner()
	},
	onShow() {
		this.newsList = []
		this.page = 1
		this.status = 'loadmore'
		this.getNewsData()
		this.getSportData()
	},
	onReachBottom() {
		if (this.status !== 'nomore') {
			this.page++
			this.getArticleData()
		}
	},
	// #ifdef  MP-WEIXIN
	onShareAppMessage(res) {
		return {
			title: serveConfig.projectName,
			path: '/pages/index/index'
		}
	},
	//#endif
	methods: {
		getBanner() {
			this.$https(false, 'get', { url: '/race/focus/list', data: {} }, (res) => {
				res.data.forEach((item) => {
					item.img = JSON.parse(item.img)[0]
				})
				this.bannerList = res.data
			})
		},
		getBannerAd() {
			this.$https(false, 'get', { url: '/race/focus/ad' }, (res) => {
				const nowTime = formatDate(new Date())
				const lastTime = uni.getStorageSync('kaiping_time')
				if (res.data && (!lastTime || nowTime !== lastTime)) {
					uni.setStorageSync('kaiping_time', nowTime)
					res.data.img = JSON.parse(res.data.img)[0]
					this.dialogArr = [res.data]
					this.show = true
				}
			})
		},
		bannerClick(index, type) {
			const item = this[type][index]
			// type：0=无跳转，1=自定义落地页，2=公众号链接，3=赛事助手详情页
			if (item.type === 1) {
				if (type === 'bannerList' || type === 'dialogArr') {
					uni.navigateTo({
						url: '/pages/index/bannerDetail?id=' + item.id
					})
				} else if (type === 'newsList') {
					uni.navigateTo({
						url: '/pages/news/detail?id=' + item.id
					})
				}
			} else if (item.type === 2) {
				console.log('打开公众号链接页面')
				uni.navigateTo({
					url: '/pages/webview/webview?url=' + item.link
				})
			} else if (item.type === 3) {
				uni.navigateTo({
					url: '/pages/saishi/detail?id=' + item.link
				})
			}
		},
		// 首页活动新闻接口
		getNewsData() {
			this.$https(
				false,
				'get',
				{
					url: '/race/article/home/1'
				},
				(res) => {
					this.newsList = this.newsList.concat(res.data)
					this.status = res.data.length > 9 ? 'loadmore' : 'nomore'
				}
			)
		},
		// 赛事信息
		getSportData() {
			this.$https(false, 'get', { url: '/race/race/hot' }, (res) => {
				this.serverList = res.data.splice(0, 2)
			})
		},
		// 详情页
		onSeverDetail(info) {
			uni.navigateTo({
				url: '/pages/saishi/detail?id=' + info.id
			})
		},
		// 点击菜单栏
		menuClick(menu) {
			switch (menu.title) {
				case '参赛助手':
					this.$utils.navigateTo(false, '/pages/zhushou/index')
					break
				case '赛事新闻':
					this.$utils.navigateTo(false, '/pages/news/index')
					break
				case '赛事报名':
					uni.switchTab({
						url: '/pages/saishi/index'
					})
					break
				case '成绩查询':
					this.$utils.navigateTo(false, '/pagesA/my/grade/index')
					break
				default:
					uni.$u.toast('当前功能暂未开通！')
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.custom-nav {
	font-size: 34rpx;
	color: #fff;
	font-family: '黑体';
}
.swiper-wrap {
	margin: 0 28rpx 24rpx;
}
.menu-wrap {
	background-color: #e60012;
	border-radius: 0 0 50rpx 50rpx;
	padding: 16rpx 0 0;
}
.menus {
	background-color: #fff;
	border-radius: 12rpx;
	margin: 0 28rpx;
	padding: 34rpx 10rpx 26rpx;
}
.menu-icon {
	width: 96rpx;
	height: 96rpx;
	margin: 0 16rpx 16rpx;
}
.grid-text {
	color: #4d4d4d;
	font-size: 24rpx;
	margin: 0 16rpx;
}
.main {
	margin: 20rpx 24rpx 0;
	padding-bottom: 2rpx;
}
.font-img {
	width: 144rpx;
	height: 48rpx;
}
.good-wrap {
	margin: 18rpx 0 32rpx;
}
.good-img {
	width: 310rpx;
	height: 254rpx;
	margin: 16rpx auto;
}
.good-txt {
	font-size: 28rpx;
	color: #222;
	margin: 16rpx 20rpx 22rpx;
	-webkit-line-clamp: 2; /* 限制显示行数 */
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}
.news {
	display: flex;
	width: calc(100% - 40rpx);
	background-color: #fff;
	margin-bottom: 20rpx;
	padding: 24rpx 20rpx;
	&-img {
		width: 220rpx;
		height: 160rpx;
		border-radius: 8rpx;
	}
	&-right {
		margin-left: 20rpx;
		max-width: 456rpx;
		width: 456rpx;
	}
}
.pop-close {
	border: 1px solid #fff;
	width: 44rpx;
	height: 44rpx;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 40rpx auto 0;
}
::v-deep {
	.main .u-cell__body {
		padding: 0;
	}
	.main .u-cell__value {
		color: #4d4d4d;
		font-size: 28rpx;
	}
	.good-wrap .u-grid-item {
		margin: 0 8rpx;
		width: calc(50% - 16rpx) !important;
	}
}
.scroll-list {
	@include flex(column);
}
</style>
